<template>
  <div class="login-page">
    <div class="login-box">
      <div class="login-logo">
        <a>后台管理</a>
      </div>
      <div class="card">
        <div class="card-body login-card-body">
          <p class="login-box-msg">Sign in to start your session</p>

          <div v-if="mode=='adm_username'">
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="账户" v-model="adm_username" />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-user"></span>
                </div>
              </div>
            </div>
            <div class="input-group mb-3">
              <input
                type="password"
                class="form-control"
                placeholder="密码"
                v-model="adm_password"
                @keyup.enter="accountLogin"
              />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-lock"></span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-8">
                <div class="icheck-primary">
                  <!-- <input type="checkbox" id="remember">
                  <label for="remember">记住密码</label>-->
                </div>
              </div>
              <div class="col-4">
                <button type="submit" class="btn btn-primary btn-block" @click="accountLogin">登陆</button>
              </div>
            </div>
          </div>
          <div style="width:100%;" class v-if="mode=='scan'">
            <div id="qrCode" ref="qrCodeDiv"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "@/api/admin";
import QRCode from "qrcodejs2";
export default {
  name: "",
  components: {},
  data() {
    return {
      adm_username: "",
      adm_password: "",
      loading: false,

      mode: "adm_username",
      check: "", 

      scan: true
    };
  },
  created() {
  },
  methods: {
    startScanQr() {
      let _this = this;
      if (!_this.scan) {
        _this.$Message.success("功能未开启!");
        return false;
      }
      this.mode = "scan";
      apis.refreshQrcode().then(response => {
        this.$nextTick(function() {
          new QRCode(this.$refs.qrCodeDiv, {
            text: response.data.data.content,
            width: 200,
            height: 200,
            colorDark: "#333333", 
            colorLight: "#ffffff", 
            correctLevel: QRCode.CorrectLevel.L 
          });
        });
        this.check = setInterval(() => {
          apis.check().then(res => {
            if (res.data.data.state == 1) {
              clearInterval(this.check);
              _this.$Message.success("登录成功!");
              setTimeout(() => {
                _this.$router.push("/");
              }, 2000);
            }
          });
        }, 1200);
      });
    },
    startAccountLogin() {
      this.mode = "adm_username";
      clearInterval(this.check);
    },
    accountLogin() {
      if (!this.adm_username) {
        this.$Message.error("请输入账户名");
        return;
      }
      if (!this.adm_password) {
        this.$Message.error("请输入密码");
        return;
      }
      apis
        .accountLogin({
          adm_username: this.adm_username,
          adm_password: this.adm_password
        })
        .then(response => {
          if (response.data.code == 200) {
            console.log(response)
            let state = response.data.data.state; 
            let nickname = response.data.data.USERINFO.adm_name
            localStorage.setItem("state", state);
            localStorage.setItem("nickname", nickname);
            localStorage.setItem("token", response.data.data.token)

            this.$Message.success("登录成功!");
            setTimeout(() => {
              this.$router.push("/");
            }, 1000);
          } else {
            this.$Message.error(response.data.msg);
          }
        });
    }
  }
};
</script>

<style scoped>
.login-page {
  background: url(../../assets/image/loginbackground.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.login-logo {
  background-color: #fff;
  padding-bottom: 0.9rem;
  margin-bottom: 0;
}

#qrCode {
  margin: auto;
  width: 200px;
  height: 200px;
}
</style>